<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <form action="###">
            <p>请输入用户名: <input type="text" v-model="username" /></p>
            <!-- 
              多选框的使用方式有两种:
                1. 单独使用:一般代表我们是否同意等等逻辑,要使用布尔值进行收集
                2. 多个使用:使用数组来收集多选的内容
             -->
            <p>你是否同意该协议 <input type="checkbox" v-model="isAgree" /></p>
            <p>
                请选择你喜欢的学科(多选)
                <input type="checkbox" value="html" v-model="like" />html
                <input type="checkbox" value="css" v-model="like" />css
                <input type="checkbox" value="js" v-model="like" />js
                <input type="checkbox" value="react" v-model="like" />react
                <input type="checkbox" value="vue" v-model="like" />vue
            </p>
        </form>
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                username: "laowang",
                isAgree: false,
                like: [],
            };
        },
    });
</script>